<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <script src="./js/index.js"></script>
    <div class="jd-layout">
        <!-- 头部 -->
        <div class="jd-header">
            <!-- logo -->
            <a href="#" class="logo jd-sprite"></a>
            <form action="">
                <span class="search-icon jd-sprite"></span>
                <input type="search" placeholder="啤酒饮料花生米">
            </form>
            <!-- 登录 -->
            <a href="#" class="login">登录</a>
        </div>
        <!-- 轮播图 -->
        <div class="jd-banner">
            <ul>
                <!-- 无缝滚动 -->
                <li>
                    <a href="#">
                        <img src="./images/banner08.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/banner01.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/banner02.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/banner03.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/banner04.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/banner05.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/banner06.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/banner07.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/banner08.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/banner01.jpg" alt="">
                    </a>
                </li>
            </ul>
            <ol>
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
        <!-- 导航 -->
        <div class="jd-nav clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="./images/nav01.png" alt="">
                        <p>京东超市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/nav02.png" alt="">
                        <p>京东超市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/nav03.png" alt="">
                        <p>京东超市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/nav04.png" alt="">
                        <p>京东超市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/nav05.png" alt="">
                        <p>京东超市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/nav06.png" alt="">
                        <p>京东超市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/nav07.png" alt="">
                        <p>京东超市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/nav08.png" alt="">
                        <p>京东超市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/nav09.png" alt="">
                        <p>京东超市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/nav10.png" alt="">
                        <p>京东超市</p>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 京东快报 -->
        <div class="jd-news">
            <img src="./images/jd-news-tit.png" alt="" class="news-tit">
            <div class="cut">
                <ul>
                    <li>王博文毕业薪资1.5W</li>
                    <li>李晓蝶毕业薪资1.5W</li>
                    <li>王博文毕业薪资1.5W</li>
                    <li>王博文毕业薪资1.5W</li>
                    <li>汪汪汪毕业薪资1.5W</li>
                    <li>王博文毕业薪资1.5W</li>
                </ul>
            </div>
            <a href="#" class="more">| 更多</a>
        </div>
        <!-- 秒杀 -->
        <div class="jd-kill">
            <!-- 秒杀头部 -->
            <div class="sk-title">
                <span class="logo fl jd-sprite"></span>
                <span class="text fl">京东秒杀</span>
                <div class="time fl">
                    <span>00</span>
                    <span>:</span>
                    <span>00</span>
                    <span>:</span>
                    <span>00</span>
                </div>
                <a href="#" class="more fr">秒杀更多 >></a>
            </div>
            <!-- 秒杀主体 -->
            <div class="sk-main">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./images/sec05.jpg" alt="">
                            <p>0.99</p>
                            <p>999</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/sec05.jpg" alt="">
                            <p>0.99</p>
                            <p>999</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/sec05.jpg" alt="">
                            <p>0.99</p>
                            <p>999</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/sec05.jpg" alt="">
                            <p>0.99</p>
                            <p>999</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/sec05.jpg" alt="">
                            <p>0.99</p>
                            <p>999</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/sec05.jpg" alt="">
                            <p>0.99</p>
                            <p>999</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/sec05.jpg" alt="">
                            <p>0.99</p>
                            <p>999</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/sec05.jpg" alt="">
                            <p>0.99</p>
                            <p>999</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/sec05.jpg" alt="">
                            <p>0.99</p>
                            <p>999</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/sec05.jpg" alt="">
                            <p>0.99</p>
                            <p>999</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 主会场 -->
        <div class="jd-show">
            <a href="#"><img src="./images/item01.jpg" alt=""></a>
            <a href="#"><img src="./images/item02.jpg" alt=""></a>
            <a href="#"><img src="./images/item03.jpg" alt=""></a>
        </div>
        <!-- 商品布局 -->
        <div class="jd-product">
            <ul>
                <li>
                    <a href="#">
                        <img src="./images/product_1.jpg" alt="">
                    </a>
                    <a href="#">
                        <img src="./images/product_2.jpg" alt="">
                    </a>
                    <a href="#">
                        <img src="./images/product_3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/product_4.jpg" alt="">
                    </a>
                    <a href="#">
                        <img src="./images/product_5.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/product_6.jpg" alt="">
                    </a>
                    <a href="#">
                        <img src="./images/product_7.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>